<template>
	<view>
		<view class="assistant">
			<view class="fixfix">
				<!-- 背景图 -->
				<view class="img_box">
					<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/manner_bg.png" mode=""></image>
				</view>
				<!-- 展位盒子 -->
				<view class="block_box"></view>
				<!-- 胶囊距离 -->
				<view class="fix">
					<top-status></top-status>
					<view class="logo">
						<uni-icons type="left" size="25" @click="back"></uni-icons>
						<view class="title">提现</view>
						<view></view>
					</view>
				</view>
				<view class="container">
					<view class="topbox">
						<view class="title_1">可提现余额</view>
						<view class="titlebox">
							<view class="commis">{{ userinfo.Balance || '0' }}</view>
							<view class="payHuiDouNav" @click="tixbtn">
								<text lines="1" class="text_4">去提现</text>
							</view>
						</view>
					</view>
					<view class="navList" v-if="false">
						<view class="navContent">
							<text lines="1" class="text_5" :class="{ navActive: navIndexValue == index }"
								@click="navIndex(index)" v-for="(item, index) in navMenu" :key="index">{{ item }}</text>
						</view>
					</view>
					<block>
						<view class="listbox">
							<!-- <view class="titlebox">
					        <view class="leftline"></view>
					        <view class="title_2">提现记录</view>
					    </view> -->
							<block v-if="list.length > 0">
								<view class="content" v-for="(item, index) in list" :key="index">
									<view class="leftbox">
										<view class="sill">{{ '金额：' + item.Money }}</view>
										<view class="time">{{ getTime2(item.CreateTime) }}</view>
									</view>
									<view class="rightbox" :style="{ color: statuColor[item.Status] }">{{ item.Status ==
										'2' ? '成功' : item.Status == '-1' ? '失败' :'待审核'}}</view>
								</view>
							</block>
							<block v-else>
								<view>
									<pageEmpty text="暂无提现记录"></pageEmpty>
								</view>
							</block>
						</view>
					</block>
				</view>
			</view>
		</view>



		<uni-popup type="center" ref="signbox" :animation="false">
			<view class="moneybox">
				<view class="moneytext">提现</view>
				<view class="moneycontent">
					<input type="number" placeholder="请输入金额" v-model="Money" />
				</view>

				<view class="summoneybox">
					<view class="summoney">{{ '可提现金额：' }}<text
							class="sumconmm">{{ (userinfo.Balance ? userinfo.Balance : '0') }}</text></view>
					<view class="allbtn" @click="Money = userinfo.Balance">全部提现</view>
				</view>
				<view class="btnbox">
					<view class="cancleBtn" @click="closePop"> 取消</view>
					<view class="confimbtn" @click="Withdrawal">确认</view>
				</view>
				<view class="Tiptext">注：提现金额不能小于1</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import pageEmpty from '@/components/pageEmpty/pageEmpty';
export default {
	components: {
		pageEmpty
	},
	data() {
		return {
			navIndexValue: 0,
			PageIndex: 1,
			PageSize: 10,
			userinfo: {},
			list: [],
			Money: 0,
			navMenu: ['提现记录'],
			ID: '',
			ShopID: '',
			statuColor: {
				'0': '#FF7713',
				'1': '#FF7713',
				'2': '#2BA139',
				'-1': '#FC201C',
			},
			isMore: true,
			Type: 'Business',  //Business:商家 Agent：代理
		};
	},
	onLoad(option) {
		this.ID = option.ID
		this.ShopID = option.ShopID
		this.Type = option.Type
		this.SaleChannelDetail()
		this.UserDepositLogs()
	},
	onShow() {

	},
	// 触底事件
	onReachBottom() {
		if (this.isMore) {
			this.PageIndex++
			this.UserDepositLogs()

		}
	},
	methods: {
		//提现记录
		async UserDepositLogs() {
			let res = await this.$api.post('RevenueRecords/GetMWithdrawalRecords', {
				PageNumber: this.PageIndex,
				PageSize: this.PageSize,
				ID: this.ID
			})
			if (res.code == 0) {
				this.list = this.list.concat(res.data)
				this.isMore =
					Array.isArray(res.data) && res.data.length >= this.PageSize;
			}

		},
		navIndex(index) {
			this.navIndexValue = index;
			this.PageIndex = 1
			this.list = []
			this.UserDepositLogs()
		},
		tixbtn() {
			// this.Money = 0
			this.$refs.signbox.open()
		},
		closePop() {
			this.$refs.signbox.close()
		},
		async Withdrawal() {

			if (Number(this.Money) < 1) {
				this.$pv.msg('提现金额不能小于1');
				return;
			}
			if (!Number(this.Money)) {
				this.$pv.msg('请输入正确的数字');
				return;
			}
			if (Number(this.userinfo.Balance) < Number(this.Money)) {
				this.$pv.msg('提现金额不能大于已拥有的佣金');
				return;
			}
			let _this = this
			uni.showModal({
				title: "温馨提示",
				content: '您确定要提现' + _this.Money + '元吗？',
				confirmText: "确定",
				success: async function (res) {
					if (res.confirm) {
						let res1 = await _this.$api.post('Shop/Deposit', {
							AmountMoney: _this.Money,
							ShopID: _this.ID
						})
						console.log(res1,'rrr');
						
						if (res1.code == 0) {
							_this.navIndex(_this.navIndexValue)
							_this.SaleChannelDetail()
							_this.$pv.msg(res1?.message);
							_this.Money = 0
							_this.$refs.signbox.close()
						} else {
							_this.$pv.msg(res1.message);
							return;
						}
					} else if (res.cancel) { }
				},
			});
		},
		async SaleChannelDetail() {
			let res = await this.$api.post('RevenueRecords/GetMerchantBalance', {
				ID: this.ID
			})
			console.log(res);
			if (res.code == 0) {
				this.userinfo = res.data[0]
				// this.Money = 
			}
		},
		//收益明细
		async UserCommissionV2() {
			let url = this.Type == 'Business' ? 'RevenueRecords/GetMerchantIncome' : 'RevenueRecords/GetAgentIncome'
			let res = await this.$api.post(url, {
				PageNumber: this.PageIndex,
				PageSize: this.PageSize,
				ShopID: this.ShopID,
				ID: this.ID
			})
			if (res.code == 0) {
				this.list = this.list.concat(res.data)
			}
			this.isMore =
				Array.isArray(res.data) && res.data.length >= this.PageSize;
		},
		getTime2(l) {
			let d = new Date(l);
			let timestamp = d.getTime();
			return this.$util.unixDatetime(timestamp, 'yy-ss');
		},
		back() {
			uni.navigateBack()
		}
	},
	created() {

	},
}
</script>

<style>
page {
	background-color: #f6f6f6;
}
</style>

<style lang='scss' scoped>
.content {
	// background-color: #b6b6b6;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	padding: 40rpx;
	border-bottom: 1rpx solid #E4E4E4;

	.leftbox {

		.sill {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 8rpx;
		}

		.time {
			font-size: 24rpx;
			color: #999999;
		}
	}

	.rightbox {
		font-size: 28rpx;
		color: #706EEE;
	}
}

.btnbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 504rpx;
	margin: 40rpx auto;
}

.cancleBtn {
	width: 240rpx;
	height: 80rpx;
	background: #F6F7FB;
	border-radius: 8rpx;
	color: #3572FE;
	display: flex;
	align-items: center;
	justify-content: center;
}

.navList {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 16rpx;
	align-self: center;
	margin-top: 24rpx;
	width: 702rpx;
	display: flex;
	flex-direction: column;
	padding: 24rpx 80rpx 8rpx 80rpx;
	margin: 0 auto;
	margin-bottom: 20rpx;
	box-sizing: border-box;

	.navContent {
		flex-direction: row;
		display: flex;
		justify-content: space-between;

		.text_5 {
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			font-family: PingFang-SC-Bold;
			font-weight: normal;
			text-align: right;
			white-space: nowrap;
			line-height: 44rpx;
		}

		.navActive {
			font-weight: bold;

			::after {
				content: "";
				display: block;
				width: 50rpx;
				height: 10rpx;
				background: #3572fe;
				margin: 0 auto;
				margin-top: 15rpx;
				border-radius: 25rpx;
			}
		}
	}
}

.moneybox {
	width: 550rpx;
	height: fit-content;
	padding: 32rpx 0;
	background-color: #fff;
	border-radius: 32rpx;

	.summoneybox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 30rpx;

		.summoney {
			font-size: 28rpx;
			color: #666666;

			.sumconmm {
				font-size: 32rpx;
				color: #333333;
			}
		}

		.allbtn {
			width: 120rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 30rpx;
			font-size: 20rpx;
			/* color: #fff; */
			font-size: 28rpx;
			color: #3572FE;
			/* background-color: #706EEE; */
		}
	}

	.moneytext {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.moneycontent {
		border: 2rpx solid #E4E4E4;
		width: 70%;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		/* text-align: center; */
		line-height: 80rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		padding: 20rpx 0;
		line-height: 1;
		padding-left: 30rpx;

		>input {
			font: inherit;
			display: block;
			min-height: 0 !important;
			// height: 100%;
		}
	}

	.confimbtn {
		width: 240rpx;
		height: 80rpx;
		background: #3572FE;
		border-radius: 8rpx;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Tiptext {
		font-size: 24rpx;
		color: #666666;
		text-align: center;
	}
}

.payHuiDouNav {
	background: #3572FE;
	border-radius: 36rpx;
	//   margin-top: 88rpx;
	display: flex;
	flex-direction: column;
	padding: 10rpx 40rpx;
	margin-left: auto;

	.text_4 {
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}
}

.topbox {
	width: 702rpx;
	height: 216rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 40rpx;
	margin: 0 auto;
	margin-bottom: 20rpx;

	.commis {
		font-weight: bold;
		font-size: 60rpx;
		color: #3572FE;
	}

	.titlebox {
		display: flex;
		align-items: center;
		/* margin-left: 32rpx; */
		/* width: 85%; */

		.coinimg {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}

		.title_1 {
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
		}
	}
}

.listbox {
	margin-top: 30rpx;
	background-color: #fff;
	width: 702rpx;
	margin: 0 auto;
	padding: 32rpx;
	box-sizing: border-box;
	min-height: 68vh;

	.titlebox {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;

		.title_2 {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}

		.leftline {
			width: 6rpx;
			height: 36rpx;
			background: #706EEE;
			border-radius: 4rpx;
			margin-right: 8rpx;
		}
	}

	.content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #E4E4E4;

		.leftbox {

			.sill {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 8rpx;
			}

			.time {
				font-size: 24rpx;
				color: #999999;
			}
		}

		.rightbox {
			font-size: 28rpx;
			color: #706EEE;
		}
	}
}

.listbox .content:last-child {
	border-bottom: 0rpx;
	padding-bottom: 0rpx;
}

// 登录框容器
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f5;
	width: 500rpx;
	height: 500rpx;
	border-radius: 20rpx;
}

// 登录框
.login-box {
	width: 90%;
	max-width: 600rpx;
	border-radius: 10rpx;
	// box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

// 标签
.label {
	width: 100%;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
	text-align: left;
}

// 输入框容器
.input-group {
	width: 100%;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
}

// 输入框
.input {
	width: 100%;
	height: 60rpx;
	border: 1rpx solid #ddd;
	border-radius: 5rpx;
	font-size: 28rpx;
	color: #333;
}

// 按钮
.button {
	width: 100%;
	height: 60rpx;
	background-color: #3572fe;
	border: none;
	border-radius: 5rpx;
	color: #ffffff;
	font-size: 28rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-top: 20rpx;


}


.change {

	font-size: 28rpx;
	box-sizing: content-box;
	padding: 10rpx;
	background-color: #3572fe;
	color: #ffffff;
	margin-left: 30rpx;
	border-radius: 20rpx;
}

.shop_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 50rpx;
	margin-bottom: 38rpx;
	padding: 0 24rpx;
}

.container {
	position: relative;
	z-index: 99;
}

.store_name {

	display: flex;
	align-items: center;
	box-sizing: border-box;


	image {
		width: 56rpx;
		height: 56rpx;
		margin-right: 16rpx;
	}

	.shop_name {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

}

.block_box {
	height: 196rpx;
}

.img_box {
	position: absolute;
	width: 100%;
	height: 500rpx;
	top: 0;

	image {
		width: 100%;
		height: 100%;
	}
}

page {
	background-color: #ffffff;
}


view {
	box-sizing: border-box;
}

.logo {
	box-sizing: border-box;
	height: 44px;
	width: 750rpx;
	align-items: center;
	padding: 0 32rpx;
	display: flex;
	justify-content: space-between;
	position: relative;

	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

	}

}

.assistant {
	position: relative;
	// height: 100vh;
	// overflow: hidden;
}

.fix {
	position: fixed;
	width: 750rpx;
	top: 0;
	left: 0;
	z-index: 98;
	// background-color: #fff;
}
</style>